<style>
    .box_hand{
        cursor: pointer;
    }
    #boxTpl .box_warp{padding:0 20px}
    #boxTpl .box_row{float:left;width:100%;clear:both}
    #boxTpl .box_body{float:left;width:100%!important;}
    #boxTpl .box_body .box_max .txt li{width:670px !important}
    #boxTpl .box_body .box_row .pic{float:left;width:30px;height:40px;border:0px solid #000;}
    #boxTpl .box_body .box_row .txt{color:#000;margin-left:0px;float:left}
    #boxTpl .box_body .box_row .txt li{width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
    #boxTpl .box_body .box_row .txt ol{margin-top:10px}
    #boxTpl .box_body .box_row .txt ol li{margin-bottom:10px}
    #boxTpl .box_body .box_row .txt ol li .icon{float:left;width:20px;height:20px;border:0px solid #fff;background:url(../imgs/20x20.png);}
    #boxTpl .box_body .box_row .txt ol li .desc{float:left;margin-left:10px;width:635px}
    #boxTpl .box_header{background:#3695d9;color:#fff;height:20px;line-height:20px;text-align:center;font-size:14px}
</style>
<script src="js/box.api.js"></script>
<div id="boxTpl">
    <div class="box_row">
        <!-- header -->
        <div class="box_header">Box Documents <i class="main_common_f_13_13 box_panel_resize right wp_mt_3 wp_mr_5 box_hand" title="Expand"></i></div>
        <!--<img src="imgs/boxComingSoon.png" alt="">-->
    </div>
    <!-- body -->
    <div class="box_row" id="box_entity">
        <div id="rootBox" style="margin-bottom: 30px;display: none">
            <div class="pic box_hand" onclick="boxes.getEmbedUrl('0')" style="border: 0 solid #000;float: left;height: 40px;width: 40px;margin-top:10px;margin-left: 20px">
                <img class="wp_w_40 wp_h_40"   src="imgs/rootbox.png" alt="" onerror="">
            </div>
            <div class="txt" style="padding-top: 23px">
                <span style="padding-left: 15px" class="box_hand" onclick="boxes.getEmbedUrl('0')">
                    Box Root
                </span>
            </div>
        </div>
        <div class="box_body" id="box_body" style="display: none">
        </div>
    </div>
</div>
<div id="box_iframe_pop_win" style="display: none">
    <div id="box_iframe_pop_content" >
        <iframe id="box_iframe_pop_win_iframe"  frameborder="0"  src=""></iframe>
    </div>
</div>
<script id="box_minRowTmpl" type="text/x-kendo-template">
    <div class="box_row wp_mb_10">
        <div class="box_warp">
            <div style="display: none">#: data.ItemId #</div>
            <div class="pic box_hand"  onclick="boxes.getEmbedUrl('#: data.ItemId #')">
                <img class="wp_w_20 wp_h_20"src="imgs/subbox.png" alt="" onerror="">
            </div>
            <div class="txt">
                <ul>
                    <li class="wp_fz_14 wp_h_20" ><span class="box_hand" title="#: data.ItemName #" onclick="boxes.getEmbedUrl('#: data.ItemId #')">#: data.ItemName #</span></li>
                    <li class="wp_fz_12">#: data.CreatedAt #</li>
                    <li class="wp_fz_12">#: data.CreatedBy #</li>
                </ul>
            </div>
        </div>
    </div>
</script>
<script>
    var boxes = (function(){
        var pageTpl = $('#boxTpl'),
                bodyTpl = $('#box_body'),
                entyTpl = $('#box_entity'),
                minRowTmpl = $.trim($('#box_minRowTmpl').html()),
                rowTmpl = null,
                _isadd = false, // if click append
                _height = Workport.utils.getViewPort().height,
                _pagePosition='',
                _pageNumber = 1,
                _pageSize = 10 ,
                _min=true,   // if is min window
                _key = '',
                _next=true,  // control when top is attached
                _order='',
                _itemUrl='0',
                win='',
                boxLoader,
                hasIframe=false,
                innerHtml =   '<button id="login_box_button" type="button" style="position:absolute;background-color:#00A9FF;height: 24px;width: 64px;font-size: 13px;margin-top: 140px;margin-left: 96px" class="k-button">Login</button>'+'<img id="boxPic" src="imgs/boxComingSoon.png" alt="">';
                var useragent = Workport.getBrowser();
            return{
                init:function(){
                    boxLoader = new Workport.Loader($('#boxes'),{ text:'Loading', position:'center',imgColor:'black', textCSS:{'color':'black'} })
                    boxLoader.show();
                    if(useragent == 'ipad'){
                        bodyTpl.css({"overflow-y":"scroll","height":"500px","-webkit-overflow-scrolling":"touch"});
                    }
                    else{
                        bodyTpl.css({'height':_height});
                    }
                    rowTmpl = minRowTmpl;
                    entyTpl.height(_height);
//                    swithListBtn.attr('onclick','communities.switchMaxList()');
                    pageTpl.appendTo('#boxes');
                    var parameter = {
                        folderId : 0,
                        count : 20,
                        pid : "0",
                        filter :"All"
                    };
                    Workport.BoxAPI.getItems(function(_d){
                        boxLoader.hide();
                        _next = true;
                        if (_d.ResponseCode == 'WP2005') {
                            _next = false;
//                            boxes.openIframWindow(BOXURL,"Boxes");
                            entyTpl.append(innerHtml);
                            $('#login_box_button').on({
                                click: function (e) {
                                    boxes.openLogin();
                                }
                            });
                        }
                        else{
                            bodyTpl.show();
                            $("#rootBox").show();
                            boxes.render(_d.BoxItem);
                            bodyTpl.slimScroll({
                                height: Workport.utils.getViewPort().height-20
                            }).bind('slimscroll',function(e,pos){
//                            if('bottom' == pos){
//                                _pageNumber++;
//                                boxes.doAppend();
//                            }
                                if(_next && 'top' == pos){
                                    _next = false;
                                    boxes.doTop();
                                }
                            });
                        }
                    },parameter);
                    //scroll in homepage
                    HomePage_Scrollable.registerZoomCallback(WPMoudleManager.getModule('boxs').index,boxes.switchMax,boxes.switchMin);
                    $('.box_panel_resize').bind( {
                        click : function (e) {
                            if(_min){
                                var showLogButton = $("#login_box_button").is(":visible");
                                if(showLogButton){
                                    boxes.openLogin();
                                }else{
                                    boxes.getEmbedUrl('0');
                                }
                            } else {
                                HomePage_Scrollable.zoom(WPMoudleManager.getModule('boxs').index);
                                _min = true;
                            }
                        }
                    });
                },
                /*init:function(){
                    if(useragent == 'ipad'){
                        bodyTpl.css({"overflow-y":"scroll","height":"500px","-webkit-overflow-scrolling":"touch"});
                    }
                    else{
                        bodyTpl.css({'height':_height});
                    }
                    rowTmpl = minRowTmpl;
                    entyTpl.height(_height);
//                    swithListBtn.attr('onclick','communities.switchMaxList()');
                    pageTpl.appendTo('#boxes');
                    //scroll in homepage
                    HomePage_Scrollable.registerZoomCallback(7,boxes.switchMax,boxes.switchMin);
                },*/
                /**
                 *switch to min
                 **/
                switchMin:function(){
//                    entyTpl.html('');
                    $("#box_iframe").hide();
                    boxLoader.show();
                    $(".box_panel_resize").toggleClass("main_common_f_13_13 main_common_m_13_13");
                    $(".box_panel_resize").attr("title",'Expand');
                    _key = '',
                    _order = '',
                    _min = true,
                    _isadd = false,
                    _next = true,
                    _pageNumber = 0;
                    _pageSize = 10;
                    bodyTpl.off('*'),
                    bodyTpl.empty(),
                    rowTmpl = minRowTmpl;
                    /*Workport.BoxAPI.getItems(function(_d){
                        if($.isArray(_d.data)){
                            _next = true;
                            if (_d.code == 'WP1005') {
                                _next = false;
                            }
                            boxes.render(_d.data);
                            _pageNumber++;
                        }
                    },{folderId:"0"});*/
                    var parameter = {
                        folderId : 0,
                        count : 20,
                        pid : "0",
                        filter :"All"
                    };
                    Workport.BoxAPI.getItems(function(_d){
                        boxLoader.hide();
                        _next = true;
                        if (_d.ResponseCode == 'WP2005') {
                            bodyTpl.hide();
                            $("#login_box_button").show();
                            $("#boxPic").show();
                            $("#rootBox").hide();
                            _next = false;
//                            entyTpl.append(innerHtml);
//                            $('#login_box_button').on({
//                                click: function (e) {
//                                    boxes.openLogin();
//                                }
//                            });
                        }
                        else{
                            bodyTpl.show();
                            $("#rootBox").show();
                            boxes.render(_d.BoxItem);
                            if(useragent == 'ipad'){
                                bodyTpl.css("overflow-y","scroll");
                            }
                        }
                    },parameter);
                },
                /**
                 *swith to max
                 **/
                switchMax:function(){
                    $("#rootBox").hide();
                    $("#login_box_button").hide();
                    $("#boxPic").hide();
                    if(_min){
                        _min=false;
                        $(".box_panel_resize").toggleClass("main_common_f_13_13 main_common_m_13_13");
                        $(".box_panel_resize").attr("title",'Collapse');
                        HomePage_Scrollable.zoom(WPMoudleManager.getModule('boxs').index);
                        bodyTpl.css("height",Workport.utils.getViewPort().height-80);
                        var iframe = '<iframe id="box_iframe" width="100%" height="100%" frameborder="0" src="'+_itemUrl+ '"></iframe>';
                        $(".box_body").html(iframe);
                        if(useragent == 'ipad'){
                            bodyTpl.css("overflow-y","none");
                        }else{
                            var bodyHtml = $(".box_body");
                            if($(".box_body").parent().hasClass("slimScrollDiv")){
                                $(".box_body").parent().replaceWith(bodyHtml);
                            }
                        }
                    }
                },
                openUrl:function(){
                    bodyTpl.css("height",Workport.utils.getViewPort().height-80);
                    boxes.createNewFrame(_itemUrl,false);
                    if(useragent == 'ipad'){
                        bodyTpl.css("overflow-y","none");
                    }else{
                        var bodyHtml = $(".box_body");
                        if($(".box_body").parent().hasClass("slimScrollDiv")){
                            $(".box_body").parent().replaceWith(bodyHtml);
                        }
                    }
                },
                gotoBox:function(url){
                    $("#rootBox").hide();
                    bodyTpl.css("height",Workport.utils.getViewPort().height-80);
                    if(_min){
                        _min=false;
                        $(".box_panel_resize").toggleClass("main_common_f_13_13 main_common_m_13_13");
                        $(".box_panel_resize").attr("title",'Collapse');
                        HomePage_Scrollable.zoom(WPMoudleManager.getModule('boxs').index);
                        var iframe = '<iframe id="box_iframe" width="100%" height="100%" frameborder="0" src="'+url+ '"></iframe>';
                        $(".box_body").html(iframe);
                    }else{
                        var iframe = '<iframe id="box_iframe" width="100%" height="100%" frameborder="0" src="'+url+ '"></iframe>';
                        $(".box_body").html(iframe);
                    }
                    if(useragent == 'ipad'){
                        bodyTpl.css("overflow-y","none");
                    }else{
                        var bodyHtml = $(".box_body");
                        if($(".box_body").parent().hasClass("slimScrollDiv")){
                            $(".box_body").parent().replaceWith(bodyHtml);
                        }
                    }
                    _min=false;
                },
                /**
                 *render template
                 **/
                render: function (_data) {
                    var tpl = kendo.template(rowTmpl, {useWithBlock: false});
                    var arr = new Array();
                    //if is list view and the first time  then add this before
                    $.map(_data, function (_elem) {
                        arr.push(tpl(_elem));
                    });
                    $(arr.join('')).appendTo('#box_body');
                    arr.length = 0;
                    if(useragent == 'ipad'){
                        var scrollbar = bodyTpl[0];
                        bodyTpl.bind("scroll", function () {
                            if (scrollbar.scrollTop == 0) { //top
                            } else if (scrollbar.scrollHeight <= scrollbar.scrollTop + _height && !lastFlag) { // bottom
                            }
                        });
                    }else{
                        bodyTpl.slimScroll({
                            width:'100%',
                            wheelStep : 20,
                            height:_height-150
                        });
                    }
                },
                doTop:function(){
                    _pageNumber = 0 ,
                    _pagePosition = '',
                    _next = true;
                },
                doAppend:function(){
                    _isadd = true;
                    if (!_next) {
                        return;
                    }
                    Workport.BoxAPI.getItems(function(_d){
                        if($.isArray(_d.data)){
                            _next = true;
                            if (_d.ResponseCode == 'WP2005') {
                                _next = false;
                                boxes.openIframWindow(BOXURL,"Boxes");
                            }
                            boxes.render(_d.data);
//                        _pageNumber++;
                        }
                    },{folderId:"0"});
                },
                getEmbedUrl:function(id){
                    var parameter = {
                        itemId : 0
                    };
                    parameter.itemId = id;
                    Workport.BoxAPI.getEmbedUrl(function(_d){
                        _itemUrl = _d.EmbedUrl;
                        if(_itemUrl!=""){
                            if(_min){
                                boxes.switchMax();
                            }else{
                                boxes.openUrl();
                            }
                        }
                    },parameter);
                },
                checkUserToken:function(code){
                    var parameter = {
                        code : 0
                    };
                    parameter.code = code;
                    if(parameter.code!='0'&&parameter.code!=''){
                        Workport.BoxAPI.checkToken(function(_d){
                            if (_d == undefined || _d.ResponseCode == 'WP2005') {
                                boxes.openLogin();
                            }
                            else{
                                boxes.getEmbedUrl('0');
                            }
                            /*var parameter = {
                             folderId : 0,
                             count : 20,
                             pid : "0",
                             filter :"All"
                             };
                             Workport.BoxAPI.getItems(function(_d){
                             _next = true;
                             if (_d.ResponseCode == 'WP2005') {
                             _next = false;
                             boxes.openIframWindow(BOXURL,"Boxes");
                             }
                             else{
                             boxes.render(_d.BoxItem);
                             }
                             },parameter);*/
//                        if(!_min){
//                            boxes.getEmbedUrl('0');
//                        }
                        },parameter);
                    }else{
                        return;
                    }
                },
               /* openUserTokenWin:function(){
                    wp_iframe_win.openIframWindow("http://www.hao123.com","hao123");
                },*/
                openIframWindow:function(url,title){
                    var box_popup_win = $('#box_iframe_pop_win');
                    box_popup_win.kendoWindow({
                        title:"Window",
                        visible:false,
                        resizable: false,
                        draggable: false,
                        modal: true,
                        actions:["Close"],
                        close:function(){
                            if(useragent == 'ipad'){
                                $('body').unbind('touchmove');
                                box_popup_win.unbind('touchmove');
                            }
                            $("#box_iframe_pop_content").empty();
                            $("#box_iframe_pop_content").append("<iframe id='box_iframe_pop_win_iframe'  frameborder='0'></iframe>");
                        },
                        open:function(){
                            if(useragent == 'ipad'){
                                $('body').bind('touchmove',function(event){event.preventDefault()});
                                box_popup_win.bind('touchmove',function(event){event.stopPropagation()});
                            }
                        }

                    });
                    $("#box_iframe_pop_win_iframe").attr("src",url);
                    document.getElementById('box_iframe_pop_win_iframe').onload = function() {
                        try{
                            box_popup_win.data("kendoWindow").open();
                            var boxhref = document.getElementById("box_iframe_pop_win_iframe").contentWindow.location.href;
                            var index = boxhref.indexOf("code=");
                            var code = boxhref.substr(index+5);
                            if($.trim(code)!=''){
                                boxes.closeWin();
                                boxes.checkUserToken(code);
                            }

                            var w = document.getElementById('box_iframe_pop_win_iframe').contentWindow.document.body.scrollWidth;
                            var h = document.getElementById('box_iframe_pop_win_iframe').contentWindow.document.body.scrollHeight;
                            var screenWidth = $(window).width();
                            if(w>(screenWidth*0.7)){
                                w=screenWidth*0.7;
                            }
                            if(h>(Screen.bodyHeight*0.7)){
                                h=Screen.bodyHeight*0.7;
                            }
                            $("#box_iframe_pop_win_iframe").width(w + 20);
                            $("#box_iframe_pop_win_iframe").height(h + 20);
                            box_popup_win.data("kendoWindow").center();
                        }catch(e){
                            var screenWidth = $(window).width();
                            w=screenWidth*0.7;
                            h=Screen.bodyHeight*0.7;
                            $("#box_iframe_pop_win_iframe").width(w + 20);
                            $("#box_iframe_pop_win_iframe").height(h + 20);
                            box_popup_win.data("kendoWindow").center();
//                            Workport.utils.alertMsg("Error",e.message,function(_data){});
                        }


                    };
                    if(title&&title!=""){
                        box_popup_win.data("kendoWindow").title(title);
                    }
                    win=box_popup_win;
                },
                closeWin:function(){
                    if(win){
                        win.data("kendoWindow").close();
                    }
                },
                createNewFrame:function(src,withEvent){
                	$("#box_iframe").remove();
                	var iframe ='<iframe id="box_iframe" width="100%" height="95%" frameborder="0" src="' + src + '"></iframe>';
                    entyTpl.append(iframe);
                    if(withEvent){
	                    document.getElementById('box_iframe').onload = function() {
	                        try{
	                            var boxhref = document.getElementById("box_iframe").contentWindow.location.href;
	                            var index = boxhref.indexOf("code=");
	                            var code = "";
	                            if(index > -1){
	                            	code = boxhref.substr(index+5);
	                            }
	                            if($.trim(code)!=''){
	                            	$("#box_iframe").hide();
	                                boxes.checkUserToken(code);
	                            } else {
	                            	entyTpl.remove("#box_iframe");
	                            	boxes.openLogin();
	                            }
	                        }catch(e){
	                            //console.log(e);
	                        }
	                    };
                    }
                },	
                openLogin:function(){
                    if (_min) {
                        _min = false;
                        $(".box_panel_resize").toggleClass("main_common_f_13_13 main_common_m_13_13");
                        $(".box_panel_resize").attr("title",'Collapse');
                        HomePage_Scrollable.zoom(WPMoudleManager.getModule('boxs').index);
                    }
//                    <iframe id="box_iframe_pop_win_iframe"  frameborder="0"  src=""></iframe>
//                    entyTpl.find("iframe").remove();
                    /*if(hasIframe){
                    	$('#box_iframe').attr("src",BOXURL);
                        $('#box_iframe').show();
                    }else{
                        var iframe = '';
                        iframe ='<iframe id="box_iframe" width="100%" height="95%" frameborder="0" src="' + BOXURL + '"></iframe>';
                        entyTpl.append(iframe);
                        hasIframe=true;
                    }*/
                    boxes.createNewFrame(BOXURL,true);
                    $("#login_box_button").hide();
                    $("#boxPic").hide();
                    entyTpl.css("overflow-y", "none");
//                        $("#box_iframe_pop_win_iframe").attr("src",BOXURL);
                }
            }
    })();
    boxes.init();
</script>